<script setup lang="ts" name="BpmnImports">
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'

const importRef = ref(null)

const openImportWindow = () => {
  importRef.value && importRef.value.click()
}

const changeImportFile = () => {
  if (importRef.value && importRef.value.files) {
    const file = importRef.value.files[0]
    const reader = new FileReader()
    reader.readAsText(file)
    reader.onload = function () {
      const xmlStr = this.result
      useModelerStore().getModeler.importXML(xmlStr as string)
    }
    importRef.value.value = ''
    importRef.value.files = null
  }
}
</script>

<template>
  <el-tooltip effect="light" content="打开文件" placement="bottom" :hide-after="100">
    <div class="item-button">
      <div class="button-icon" @click="openImportWindow">
        <svg-icon icon="ri:folder-open-line"></svg-icon>
      </div>
      <input type="file" ref="importRef" style="display: none" accept=".xml,.bpmn" @change="changeImportFile" />
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
.item-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 2px;
  border-radius: 2px;
  cursor: pointer;

  .button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    cursor: pointer;

    &:hover {
      background-color: var(--el-color-primary-light-9);

      .el-icon {
        color: var(--el-color-primary);
      }
    }
  }

  .el-icon {
    font-size: 20px !important;
  }
}
</style>
